﻿html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>

<body>
<p>
    <xmp id="show">
    </xmp>
</p>
<p>
    <xmp id="init">
    </xmp>
</p>
<p>
    <input type="text" id="text1" value="用户名(username)"/>
</p>

<p>
    <input type="text" id="text2" value="password"/>
</p>

<p>
    <input type="button" id="enter" value="发消息给Native" onclick="testClick();"
            />
</p>

<p>
    <input type="button" id="enter1" value="拍照" onclick="testClick1();"
            />
</p>
<p>
    <input type="button" id="enter3" value="优图" onclick="testClick2();"
    />
</p>
<p>
    <input type="button" id="enter4" value="联系人" onclick="testClick3();"
    />
</p>
<p>
    <input type="button" id="enter5" value="位置" onclick="testClick4();"
    />
</p>
<p>
    <input type="button" id="enter2" value="显示源代码" onclick="testDiv();"/>
</p>

<p>
    <input type="file" id="open" value="打开文件" onclick="onOpen();"/>
</p>
</body>
<script>

        function onOpen() {
          　var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            var data = "name=" + str1 + ",pass=" + str2;
            //call native method


            window.WebViewJavascriptBridge.callHandler(
                'functionOpen'
                , {'param': data }
                , function(responseData) {
                    //document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData;


                }
            );
        }
        function testDiv() {
            document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
        }
        function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            //发送消息给java本地代码
            var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                }
            );
        }
        function testClick1() {
            <!--var str1 = document.getElementById("text1").value;-->
            <!--var str2 = document.getElementById("text2").value;-->
            <!--var data = "name=" + str1 + ",pass=" + str2;-->
            <!--//call native method-->
          window.WebViewJavascriptBridge.callHandler(
                'camera'
                , {'Data': 'json数据传给Android端'}  //该类型是任意类型
                , function(responseData) {
                alert(responseData)
                    document.getElementById("show").innerHTML = "得到Java传过来的数据 data = " + responseData
                }
            );


        }
        function testClick2() {

          window.WebViewJavascriptBridge.callHandler(
                'youtu'
                , {'Data': 'json数据传给Android端'}  //该类型是任意类型
                , function(responseData) {
                alert(responseData)
                    document.getElementById("show").innerHTML = "得到Java传过来的数据 data = " + responseData
                }
            );


        }
        function testClick3() {
            <!--var str1 = document.getElementById("text1").value;-->
            <!--var str2 = document.getElementById("text2").value;-->
            <!--var data = "name=" + str1 + ",pass=" + str2;-->
            <!--//call native method-->
          window.WebViewJavascriptBridge.callHandler(
                'contact'
                , {'Data': 'json数据传给Android端'}  //该类型是任意类型
                , function(responseData) {
                alert(responseData)
                    document.getElementById("show").innerHTML = "得到Java传过来的数据 data = " + responseData
                }
            );


        }
        function testClick4() {
            <!--var str1 = document.getElementById("text1").value;-->
            <!--var str2 = document.getElementById("text2").value;-->
            <!--var data = "name=" + str1 + ",pass=" + str2;-->
            <!--//call native method-->
          window.WebViewJavascriptBridge.callHandler(
                'deviceId'
                , '0'  //该类型是任意类型
                , function(responseData) {
                alert(responseData)
                    document.getElementById("show").innerHTML = "得到Java传过来的数据 data = " + responseData
                }
            );


        }
        function bridgeLog(logContent) {
            document.getElementById("show").innerHTML = logContent;
        }
        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
       // 第一连接时初始化bridage
        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });
            // 注册一个"functionInJs",
            bridge.registerHandler("functionInJs", function(data, responseCallback) {

                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "Javascript Says  我要你的地址!";
                // response层
                responseCallback(responseData);
            });
        })
        bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': 'Wee!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });

</script>

</html>